<template>
    <div class="SCsucceed">
        <!--成交中心头部-->
        <div class="SCsucceedTop">
            <span class="SCsucceedTopLeft">统计时间：2019-07-25 16:27</span>
            <p class="SCsucceedTopRight">
                <span :class="timeIndex == 1?'SCsucceedTopRightSpanS':''" @click="timeIndexSelect(1)">今日流量</span>
                <span :class="timeIndex == 2?'SCsucceedTopRightSpanS':''" @click="timeIndexSelect(2)">昨日流量</span>
                <span :class="timeIndex == 3?'SCsucceedTopRightSpanS':''" @click="timeIndexSelect(3)">一周流量</span>
                <span :class="timeIndex == 4?'SCsucceedTopRightSpanS':''" @click="timeIndexSelect(4)">一月流量</span>
            </p>
        </div>
        <!--成交中心第二块-->
        <div class="SCsucceedTwo">
            经营状况
        </div>
        <!--成交中心第三块,中心内容-->
        <div class="SCsucceedCenter">
            <!--第一块-->
            <div class="SCsucceedCenterOne SCsucceedCenterDiv">
                <p class="SCsucceedCenterDivA">2006</p>
                <p class="SCsucceedCenterDivB">访客数</p>
                <p class="SCsucceedCenterDivC">
                    <span>日环比</span>
                    <span :id="12 > 0?'SCsucceedCenterDivUp':''">12.06%</span>
                    <img v-if="false" src="./../../assets/img/shopCenter/shopCenterUp.png" alt="">
                    <img v-if="true" src="./../../assets/img/shopCenter/shopCenterDown.png" alt="">
                </p>
                <p class="SCsucceedCenterDivD">
                    <span>周环比</span>
                    <span :id="12 < 0?'SCsucceedCenterDivUp':''">12.06%</span>
                    <img v-if="true" src="./../../assets/img/shopCenter/shopCenterUp.png" alt="">
                    <img v-if="false" src="./../../assets/img/shopCenter/shopCenterDown.png" alt="">
                </p>
                <div>

                </div>
            </div>
            <!----------------------------两块之间的间隔-->
            <span class="SCsucceedCenterBorder"></span>
            <!--第二块-->
            <div class="SCsucceedCenterTwo SCsucceedCenterDiv">
                <p class="SCsucceedCenterDivA">696</p>
                <p class="SCsucceedCenterDivB">支付金额(元)</p>
                <p class="SCsucceedCenterDivC">
                    <span>日环比</span>
                    <span :id="12 < 0?'SCsucceedCenterDivUp':''">12.06%</span>
                    <img v-if="true" src="./../../assets/img/shopCenter/shopCenterUp.png" alt="">
                    <img v-if="false" src="./../../assets/img/shopCenter/shopCenterDown.png" alt="">
                </p>
                <p class="SCsucceedCenterDivD">
                    <span>周环比</span>
                    <span :id="12 > 0?'SCsucceedCenterDivUp':''">12.06%</span>
                    <img v-if="false" src="./../../assets/img/shopCenter/shopCenterUp.png" alt="">
                    <img v-if="true" src="./../../assets/img/shopCenter/shopCenterDown.png" alt="">
                </p>
                <div>

                </div>
            </div>
            <!----------------------------两块之间的间隔-->
            <span class="SCsucceedCenterBorder"></span>
            <!--第三块-->
            <div class="SCsucceedCenterThree SCsucceedCenterDiv">
                <p class="SCsucceedCenterDivA">4.98%</p>
                <p class="SCsucceedCenterDivB">支付转化率</p>
                <p class="SCsucceedCenterDivC">
                    <span>日环比</span>
                    <span :id="12 < 0?'SCsucceedCenterDivUp':''">12.06%</span>
                    <img v-if="true" src="./../../assets/img/shopCenter/shopCenterUp.png" alt="">
                    <img v-if="false" src="./../../assets/img/shopCenter/shopCenterDown.png" alt="">
                </p>
                <p class="SCsucceedCenterDivD">
                    <span>周环比</span>
                    <span :id="12 < 0?'SCsucceedCenterDivUp':''">12.06%</span>
                    <img v-if="true" src="./../../assets/img/shopCenter/shopCenterUp.png" alt="">
                    <img v-if="false" src="./../../assets/img/shopCenter/shopCenterDown.png" alt="">
                </p>
                <div>

                </div>
            </div>
            <!----------------------------两块之间的间隔-->
            <span class="SCsucceedCenterBorder"></span>
            <!--第四块-->
            <div class="SCsucceedCenterFour SCsucceedCenterDiv">
                <p class="SCsucceedCenterDivA">26</p>
                <p class="SCsucceedCenterDivB">退款金额(元)</p>
                <p class="SCsucceedCenterDivC">
                    <span>日环比</span>
                    <span :id="12 < 0?'SCsucceedCenterDivUp':''">12.06%</span>
                    <img v-if="true" src="./../../assets/img/shopCenter/shopCenterUp.png" alt="">
                    <img v-if="false" src="./../../assets/img/shopCenter/shopCenterDown.png" alt="">
                </p>
                <p class="SCsucceedCenterDivD">
                    <span>周环比</span>
                    <span :id="12 < 0?'SCsucceedCenterDivUp':''">12.06%</span>
                    <img v-if="true" src="./../../assets/img/shopCenter/shopCenterUp.png" alt="">
                    <img v-if="false" src="./../../assets/img/shopCenter/shopCenterDown.png" alt="">
                </p>
                <div>

                </div>
            </div>
        </div>
        <!--内容下面的更新时间,(没在内容里面)-->
        <p class="SCsucceedCenterTime">更新时间：2019-07-25 20:24</p>
    </div>
</template>

<script>
    export default {
        name: "SCsucceed",
        data(){
            return {
                // 选择流量日期
                timeIndex:1,
            }
        },
        methods: {
            // 选择显示数据的日期
            timeIndexSelect(index){
                this.timeIndex = index;
            }
        },
        mounted(){

        }
    }
</script>

<style scoped>


    /* 头部 */
    .SCsucceedTop{
        width:960px;
        height:33px;
        line-height: 33px;
        font-size: 14px;
        font-weight: 400;
        background: #ffffff;
        padding: 0 28px;
        margin-bottom: 15px;
        /* border-radius: 5px; */
    }
    .SCsucceedTopLeft{
        color: #1296DB;
    }
    .SCsucceedTopRight{
        height:33px;
        color: #000000;
        float: right;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .SCsucceedTopRight span{
        display: inline-block;
        width: 80px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 4px;
        margin-left: 10px;
        cursor: pointer;
    }
    .SCsucceedTopRight span:hover{
        display: inline-block;
        width: 80px;
        height: 25px;
        color: #FB6451;
        line-height: 25px;
        text-align: center;
        border-radius: 4px;
        margin-left: 10px;
        cursor: pointer;
    }
    /* 选中的日期 */
    .SCsucceedTopRight .SCsucceedTopRightSpanS{
        color: #FB6451;
    }
    /* 成交中心第二块 */
    .SCsucceedTwo{
        width:1015px;
        height:40px;
        line-height: 40px;
        background:#FFFFFF;
        font-size:19px;
        font-weight:400;
        color:rgba(0,0,0,1);
        text-indent: 28px;
        margin: 20px 0 15px;
    }
    /*成交中心内容*/
    .SCsucceedCenter{
        width:1015px;
        height:302px;
        background:#FFFFFF;
        border-bottom: 1px solid #000000;
        display: flex;
        justify-content: space-around;
    }
    /* 中心内容 */
    .SCsucceedCenterDiv{
        width: 24%;
        /* background: orange; */
    }

    /* 两块之间的间隔 */
    .SCsucceedCenterBorder{
        display: inline-block;
        height: 143px;
        width: 1px;
        background: #DCDCDC;
        margin-top: 40px;
    }
    /* 里面第一行文字 */
    .SCsucceedCenterDivA{
        font-size:25px;
        text-align: center;
        font-weight:bold;
        color:#FB6451;
        line-height:40px;
        margin-top: 30px;
    }
    /* 里面第二行文字 */
    .SCsucceedCenterDivB{
        font-size:17px;
        text-align: center;
        font-family:"PingFang-SC-Bold";
        font-weight:bold;
        color:#000000;
        line-height:20px;
    }
    /* 里面第三行文字 */
    /* 里面第四行文字 */
    .SCsucceedCenterDivC,
    .SCsucceedCenterDivD{
        margin-top: 10px;
        padding-left: 55px;
    }
    .SCsucceedCenterDivC span:nth-child(1),
    .SCsucceedCenterDivD span:nth-child(1){
        font-size:14px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:rgba(0,0,0,1);
    }
    .SCsucceedCenterDivC span:nth-child(2),
    .SCsucceedCenterDivD span:nth-child(2){
        font-size:14px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:rgba(255,0,0,1);
        margin: 0 10px 0 30px;
    }
    .SCsucceedCenterDivC img,
    .SCsucceedCenterDivD img{
        display: inline-block;
        width:9px;
        height:12px;
    }
    /* 当比例低的时候 */
    #SCsucceedCenterDivUp{
        color: #22AC38;
    }



    /* 更新时间 */
    .SCsucceedCenterTime{
        width: 1015px;
        font-size:14px;
        font-weight:400;
        color:#787878;
        line-height: 40px;
        text-indent: 28px;
        background: #FFFFFF;
    }

</style>
